<template>
  <div class="accelerometer">
    <p>Accelerometer模块管理设备加速度传感器，用于获取设备加速度信息</p>
    <div>屏幕水平方向: {{x}}</div>
    <div>垂直屏幕水平方向: {{y}}</div>
    <div>垂直屏幕平面方向: {{z}}</div>


    <div class="centent">
      知识点：
      <p>1、通过plus.accelerometer获取设备加速度传感器管理对象</p>
      <p>2、plus.accelerometer.getCurrentAcceleration()获取当前状态</p>
      <p>3、plus.accelerometer.watchAcceleration() 监听改变</p>
      <p>(1)成功回调函数， <br> (2)失败回调函数 code 、message <br>(3){frequency: 1000} 监听间隔时间</p>
      <p> 4、plus.accelerometer.clearWatch(watchId); 关闭监听</p>
    </div>
  </div>
</template>

<script>
  var watchId;
  export default {
    name: "accelerometer",
    data() {
      return {
        x: "",
        y: "",
        z: ""
      }
    },
    mounted() {
      // document.addEventListener( "plusready", this.onPlusReady(), false );
      this.onPlusReady();
    },
    methods: {
      onPlusReady() {
        this.getCurrentAcceleration();
        this.watchAcceleration();
      },
      getCurrentAcceleration() {
        const that = this;
        plus.accelerometer.getCurrentAcceleration(function (res) {
          that.x = res.xAxis;
          that.y = res.yAxis;
          that.z = res.zAxis;
          console.log(JSON.stringify(res));
        });
      },
      watchAcceleration() {
        const that = this;
        setTimeout(function () {
          watchId = plus.accelerometer.watchAcceleration(function (res) {
            that.x = res.xAxis;
            that.y = res.yAxis;
            that.z = res.zAxis;
            console.log(JSON.stringify(res));
          }, function (e) {
            mui.alert("watchAcceleration error: code/" + e.code + "msg/" + e.message, "", "", "", "div");
          }, {frequency: 1000});
        }, 3000)
      }
    },
    beforeDestroy() {
      plus.accelerometer.clearWatch(watchId);
    }
  }
</script>

<style scoped lang="scss">
  .accelerometer {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;

    .centent{
      margin-top: 100px;
    }
  }
</style>
